<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/flexible_css.debug (1).js"></script>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../dist/css/swiper.min.css">
    <link rel="stylesheet" href="../css/find.css">
</head>
<body>
    <header class="header">
        <p>发现</p>
    </header>
    <main class="main">
        <div class="div_box">
            <ul>
                <li><span>标签</span></li>
            </ul>
            <div class="img">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide center">
                            <img src="../images/find_03.png" alt="">
                            <p>#影响力</p>
                        </div>    
                        <div class="swiper-slide center">
                            <img src="../images/find_05.png" alt="">
                            <p>#大师访谈</p>
                        </div>  
                        <div class="swiper-slide center">
                            <img src="../images/find_07.png" alt="">
                            <p>#新月速递</p>
                        </div>    
                        <div class="swiper-slide center">
                            <img src="../images/find_09.png" alt="">
                            <p>#餐饮创新</p>
                        </div>      
                        <div class="swiper-slide center">
                            <img src="../images/find_03.png" alt="">
                            <p>#影响力</p>
                        </div>    
                        <div class="swiper-slide center">
                            <img src="../images/find_05.png" alt="">
                            <p>#大师访谈</p>
                        </div>  
                        <div class="swiper-slide center">
                            <img src="../images/find_07.png" alt="">
                            <p>#新月速递</p>
                        </div>    
                        <div class="swiper-slide center">
                            <img src="../images/find_09.png" alt="">
                            <p>#餐饮创新系</p>
                        </div>      
                    </div>
                </div>    
            </div>
        </div>
        <div class="div_box top">
            <ul>
                <li><span>直播</span></li>
                <li class="list"><span>更多></span></li>
            </ul>
            <div class="img">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide center">
                            <img class="img_wi" src="../images/img_chu.png" alt="">
                        </div>    
                        <div class="swiper-slide center">
                            <img class="img_wi" src="../images/img_chu.png" alt="">
                        </div>  
                        <div class="swiper-slide center">
                            <img class="img_wi" src="../images/img_chu.png" alt="">
                        </div>    
                        <div class="swiper-slide center">
                            <img class="img_wi" src="../images/img_chu.png" alt="">
                        </div>      
                        <div class="swiper-slide center">
                            <img class="img_wi" src="../images/img_chu.png" alt="">
                        </div>    
                    </div>
                </div>    
            </div>
        </div>
        <div class="div_box top" id="hegt">
            <ul>
                <li><span>咨询与专题</span></li>
            </ul>
            <dl>
                <dt><img src="../images/img_zhang.png" alt=""></dt>
                <dd>
                    <h2>8种地域风味，8道章鱼菜谱</h2>
                    <p><span>食材</span>|<span>05-08</span></p>
                </dd>
            </dl>
        </div>
    </main>
    <footer class="footer">
        <div>
            <a href="../index.html">
                <img src="../images/home.png" alt="">
                <p>推荐</p>
            </a>
        </div>
        <div>
            <img src="../images/img_ling.png" alt="">
            <p>发现</p>
        </div>
        <div>
            <a href="issue.html">
                <img src="../images/foot_11.png" alt="">
                <p>发布</p>
            </a>
        </div>
        <div>
            <a href="move.html">
                <img src="../images/foot_17.png" alt="">
                <p>动态</p>
            </a>
        </div>
        <div>
            <a href="my.html">
                <img src="../images/foot_19.png" alt="">
                <p>我的</p>
            </a>
        </div>
    </footer>
    <script src="../js/swiper.min.js"></script>
    <script src="../js/flexible.debug (1).js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script>
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            slidesPerView: 5,
            spaceBetween: 50,
            breakpoints: {
                1074: {
                    slidesPerView: 4,
                    spaceBetween: 40
                },
                350: {
                    slidesPerView: 3,
                    spaceBetween: 30
                },
                250: {
                    slidesPerView: 2,
                    spaceBetween: 20
                },
                150: {
                    slidesPerView: 1,
                    spaceBetween: 10
                }
            }
        });
    </script>
</body>
</html>